<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的动态指令与v-once指令</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <component :is="type"></component> <!-- 2. vue中动态指令自带的固定标签以及属性,属性值自定义的 -->
        <button @click="butClick">change</button> <!-- 4. 设置一个按钮,点击触发一个事件 -->
    </div>

    <script>
        // 1. 定义两个组件
        Vue.component('child-one', {
            template: '<div v-once>child-one</div>' // 6. 因为每次展示隐藏组件其实都是销毁再创建,不管之前有没有创建过,所以比较消耗性能.v-once指令的作用就是将创建的组件放到内存中,再次隐藏展示的时候不需要销毁和创建,节省了性能
        })
        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    type: 'child-one' // 3. 动态指令的is属性值需要在vue对象中定义,设定一个初始值,值要和组件的id相同
                }
            },
            methods: {
                butClick: function () {
                    // 5. 将动态指令中的属性值拿到,这个属性值的内容在data中定义了,如果是one则变成two,反之相同. 动态指令就会自动的根据type是哪一个就调用展示哪一个组件,值要和组件的id相同
                    this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
                }
            },
        })
    </script>
</body>

</html>